<!-- 排班设置 -->
<template>
  <div class="ky-container">
    <el-card shadow="hover" class="ky-card-sm ky-card-hdbg">
      <el-form
        :model="formData"
        :inline="true">
        <el-form-item label="医院">
          <el-select size="small" filterable v-model="formData.hospitalCode" @change="handleChangeHospital" placeholder="请选择医院">
            <el-option
              v-for="item in mx_hospitalList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="影像区域">
          <el-select size="small" style="width: 160px;" class="param-type_input" v-model="formData.depArea" placeholder="请选择" clearable collapse-tags @change="handleChangeDepArea">
            <el-option
              v-for="(item,index) in depAreaOptions"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检查部门">
          <!-- :disabled="!formData.depArea" 不要disabled了，小医院是没影像区域的，要让可以单独设置检查部门-->
          <el-select size="small" style="width: 160px;" class="param-type_input" v-model="formData.dep" placeholder="请选择" clearable @change="handleChangeDep">
            <el-option
              v-for="(item,index) in scheduledDepOptions"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-tooltip class="item" effect="dark" :content="setTimeTip" placement="top-start">
            <el-button type="primary" size="mini" class="" @click="searchBtn">查询</el-button>
          </el-tooltip>
        </el-form-item>
        <el-form-item v-if="isShowDeleteBtn">
          <el-tooltip class="item" effect="dark" :content="setTimeTipDelete" placement="top-start">
            <el-button type="default" size="mini" class="" @click="deleteBtn">删除</el-button>
          </el-tooltip>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="hover" class="ky-card-xs ky-card-hdbg ky-mt10">
      <el-tabs tab-position="left" class="tabs">
        <el-tab-pane label="时令班次">
          <shiftsInSeason :hospital-code="formData.hospitalCode" :dep-area="formData.depArea" :dep="formData.dep" @getId="getId"></shiftsInSeason>
        </el-tab-pane>
        <el-tab-pane lazy label="节假日">
          <calendar :hospital-code="formData.hospitalCode"></calendar>
        </el-tab-pane>
        <el-tab-pane lazy label="缴费设置">
          <paymentSetting :hospital-code="formData.hospitalCode"></paymentSetting>
        </el-tab-pane>
        <el-tab-pane lazy label="时段限制无效设置">
          <timeSetting :hospital-code="formData.hospitalCode"></timeSetting>
        </el-tab-pane>
        <el-tab-pane lazy label="机房分组号源设置" v-if="checkGroupNumber">
          <checkroomAppointNum :hospital-code="formData.hospitalCode"></checkroomAppointNum>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import shiftsInSeason from './shiftsInSeason'
import calendar from './calendar'
import paymentSetting from './paymentSettings'
import timeSetting from './timeSettings'
import checkroomAppointNum from './checkroomAppointNum'
import {
  getDepAreaList,
  getDepList,
  hospitalDelete
} from '@/api/api.js'
import bus from '@/api/bus'
export default {
  name: '',
  components: { shiftsInSeason, calendar, paymentSetting, timeSetting, checkroomAppointNum },
  data() {
    return {
      seasonRuleId: '',
      isShowDeleteBtn: false,
      setTimeTipDelete: '医院级别时令不能删除，其他院区和部门级别可删除',
      scheduledDepOptions: [],
      depAreaOptions: [],
      checkGroupNumber: false,
      formData: {
        hospitalCode: '',
        depArea: '', // 影像区域
        dep: '' // 检查部门
      }
    }
  },
  watch: {},
  computed: {
    ...mapGetters(['setTimeTip'])
  },
  created() {
    this.$getHospitalList()
    this.getDepAreaOptions()
    this.getScheduledDepOptions()
  },
  mounted() {
    this.formData.hospitalCode = this.$store.state.user.hospitalCode || ''
    bus.$off('tiggerDeleteBtn')
    bus.$on('tiggerDeleteBtn', (b) => {
      console.log('tiggerDeleteBtn', b)
      this.isShowDeleteBtn = b
    })
  },
  methods: {
    getId(id) {
      console.log('getId', id)
      this.seasonRuleId = id
    },
    deleteEvent() {
      let params = {
        HospitalCode: this.formData.hospitalCode,
        Id: this.seasonRuleId
      }
      hospitalDelete(params).then((res) => {
        console.log('res', res)
        if (res.code == 10000) {
          this.$message.success(res.message)
          bus.$emit('getHospitalData')
        }
      })
    },
    deleteBtn() {
      let tip = ''
      if (this.formData.depArea && !this.formData.dep) {
        tip = this.formData.depArea
      } else if (!this.formData.depArea && this.formData.dep) {
        tip = this.formData.dep
      } else if (this.formData.depArea && this.formData.dep) {
        tip = `${this.formData.depArea}-${this.formData.dep}`
      } else if (!this.formData.depArea && !this.formData.dep) {
        tip = `医院级别时令不能删除`
        this.$message.warning(tip)
        return
      } else {
        return
      }
      this.$confirm(`是否确定要删除[${tip}]的时令？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then((e) => {
        console.log('e', e)
        this.deleteEvent()
      }).catch((catch_e) => {
        console.log('catch_e', catch_e)
      })
    },
    handleChangeHospital(e) {
      this.formData.depArea = ''
      this.formData.dep = ''
      this.getDepAreaOptions()
    },
    handleChangeDepArea(e) {
      this.formData.dep = ''
      this.scheduledDepOptions = []
      console.log('e', e)
      this.getScheduledDepOptions()
      // 触发getHospitalData事件放在了views/scheduling/schedulsetting/shiftsInSeason.vue页面里的watch里了
      // e == '' && bus.$emit('getHospitalData')
    },
    handleChangeDep(e) {
      console.log('e', e)
      console.log('没触发getHospitalData')
      // 触发getHospitalData事件放在了views/scheduling/schedulsetting/shiftsInSeason.vue页面里的watch里了
      // e == '' && bus.$emit('getHospitalData')
    },
    searchBtn() {
      bus.$emit('getHospitalData')
    },
    getDepAreaOptions() {
      /* 影像区域列表 */
      getDepAreaList({ hospitalCode: this.formData.hospitalCode || this.$store.state.user.hospitalCode }).then(res => {
        if (res.code === 10000) {
          this.depAreaOptions = res.content.list
        }
      })
    },
    getScheduledDepOptions() {
      /* 检查部门列表 */
      let params = {
        hospitalCode: this.formData.hospitalCode || this.$store.state.user.hospitalCode,
        depArea: this.formData.depArea
      }
      return getDepList(params).then((res) => {
        if (res.code === 10000) {
          this.scheduledDepOptions = res.content.list
          return res
        }
      })
    }
  },
  beforeDestroy() {},
  destroyed() {},
  beforeUpdate() {},
  updated() {}
}
</script>
<style lang='scss' scoped>
.ky-card-hdbg{
    .el-form{
        /deep/ .el-form-item{
            margin-bottom: 0px;
        }
    }
}
.tabs{
    height: calc(100% - 32px);
    background: #FFFFFF;
    border-radius: 2px;
    padding-bottom: 30px;
    .el-tabs--left .el-tabs__header.is-left{
         margin-right: 0px;
    }
    /deep/ .el-tabs__content{
        height: 100%;
    }
    /* .el-tabs /deep/ .el-tabs__content div{
        height: 100%;
    } */
    /deep/ .el-tab-pane{
        height:100%;
    }
    /deep/ .el-tabs__header.is-left{
        margin: 0px;
        width:208px;
    }
    /deep/ .el-tabs__item{
        text-align: left;
    }
    /deep/ .el-tabs__item.is-active{
        background: #E7F7FF;
        // color: #1890FF!important;
        font-weight: 600;
    }
    /deep/ .el-tabs__nav.is-left{
        margin-top: 16px;
    }
}
</style>
